<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
            #container{
                width: 800px;
                height: 600px;
            }
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
        //实例化echarts
        // 1 创建一个实例
        var echart = echarts.init(document.getElementById("container"));

        let data1 = [175, 160, 153, 121, 156]
        let data2 = [200, 140, 205, 162, 175]
        let data3 = []
        let data4 = ['13:00', '14:00', '15:00', '16:00', '17:00']
        data1.forEach((item1,index)=>{
            if(item1>data2[index]){
                data3.push(
                    {
                        yAxis: item1,  //标注的Y轴位置
                        xAxis: data4[index], //标注的X轴位置
                        value: item1  //标注的value值
                    }
                )
            }else{
                data3.push(
                    {
                        yAxis: data2[index],  //标注的Y轴位置
                        xAxis: data4[index], //标注的X轴位置
                        value: data2[index]  //标注的value值
                    }
                )
            }
        })

        // 2 定义配置项
        var option = {
            backgroundColor: 'white',
            grid: {
                top: '20%',
                left: '5%',
                right: '5%',
                bottom: '8%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                borderWidth: 1,
                axisPointer: {
                    type: 'shadow'
                },
                extraCssText: 'z-index:2'

            },
            legend: [{
                top: 'top',
                left: 'center',
                orient: 'horizontal',
                data: ['进水量', '出水量'],
                itemWidth: 15,
                itemHeight: 10,
                itemGap: 15,
                borderRadius: 4,
                textStyle: {
                    color: '#000',
                    fontFamily: 'Alibaba PuHuiTi',
                    fontSize: 14,
                    fontWeight: 400
                }
            }],
            xAxis: {
                type: 'category',
                data: data4,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#393939' //X轴文字颜色
                    }
                }
            },
            yAxis: [

                {
                    type: 'value',
                    name: '',
                    nameTextStyle: {
                        color: '#000',
                        fontFamily: 'Alibaba PuHuiTi',
                        fontSize: 14,
                        fontWeight: 600
                        // padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
                    },
                    nameGap: 30,  // 表现为上下位置
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#eeeeee'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#393939',
                        fontSize: 14
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#eeeeee'
                        }
                    }

                }

            ],
            series: [
                {
                    name: '进水量',
                    type: 'line',
                    showAllSymbol: true, //显示所有图形。
                    //标记的图形为实心圆
                    symbolSize: 8, //标记的大小
                    itemStyle: {
                        //折线拐点标志的样式
                        color: 'white',
                        borderWidth: '2',
                        borderColor: '#5470c6',
                        normal: {
                            color: '#5470c6'//拐点颜色
                        }
                    },
                    lineStyle: {
                        color: '#5470c6'
                    },
                    markPoint:{
                        data: data3
                    },
                    data: data1
                },
                {
                    name: '出水量',
                    type: 'line',
                    showAllSymbol: true, //显示所有图形。
                    symbolSize: 8, //标记的大小
                    itemStyle: {
                        //折线拐点标志的样式
                        color: 'white',
                        borderWidth: '2',
                        borderColor: '#91cc75',
                        normal: {
                            color: '#91cc75'//拐点颜色
                        }
                    },
                    lineStyle: {
                        color: '#91cc75'
                    },
                    data: data2
                }
            ]
        }
        // 3 更新配置
        echart.setOption(option);

	</script>

</html>
